<%- contentFor('mainContent') %>

<!-- Page content-->
<div class="container mt-4">
    <div class="card shadow custom-card">
        <div class="mb-3 row">
            <h1 class="text-left mb-4 fw-bold">添加账单</h1>
            <hr />
        </div>

        <div class="mb-3 row card-body"></div>

        <form action="/api/account" method="post">
            <div class="row mb-3 flex-nowrap">
                <label class="col-3 col-form-label col-form-label-sm text-end">支出类型</label>
                <div class="col-7">
                    <div class="row d-flex flex-row">
                        <div class="col-6">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="type" id="type1" value="-1"
                                    checked>
                                <label class="form-check-label" for="type1">
                                    支出项
                                </label>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="type" id="type2" value="1">
                                <label class="form-check-label" for="type2">
                                    收入项
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-3 flex-nowrap">
                <label for="category" class="col-3 col-form-label col-form-label-sm text-end">名称</label>
                <div class="col-7">
                    <input type="text" class="form-control" name="category" id="category" placeholder="账单名目">
                </div>
            </div>

            <div class="row mb-3 flex-nowrap">
                <label for="amount" class="col-3 col-form-label col-form-label-sm text-end">金额</label>
                <div class="col-7">
                    <input type="text" class="form-control" id="amount" name="amount" placeholder="账单金额">
                </div>
            </div>

            <div class="row mb-3 flex-nowrap">
                <label for="payType" class="col-3 col-form-label col-form-label-sm text-end">支付类型</label>
                <div class="col-7 position-relative">
                    <input type="text" class="form-control" list="payTypeOptions" id="payType" name="payType"
                        placeholder="选择或输入支付方式" value="微信支付">
                    <button type="button" class="btn btn-link position-absolute top-50 end-0 translate-middle-y"
                        onclick="this.previousElementSibling.value=''">
                        <i class="bi bi-x-circle text-secondary"></i>
                    </button>
                    <datalist id="payTypeOptions">
                        <option value="信用卡">
                        <option value="储蓄卡">
                        <option value="微信支付">
                        <option value="支付宝">
                        <option value="现金支付">
                        <option value="其他支付">
                    </datalist>
                </div>
            </div>

            <div class="row mb-3 flex-nowrap">
                <label for="date" class="col-3 col-form-label col-form-label-sm text-end">日期</label>
                <div class="col-7">
                    <input type="date" class="form-control" id="date" name="date"
                        value="<%= new Date().toISOString().slice(0,10) %>">
                </div>
            </div>

            <div class="row mb-3 flex-nowrap">
                <label for="remark" class="col-3 col-form-label col-form-label-sm text-end">备注</label>
                <div class="col-7">
                    <textarea class="form-control" id="remark" name="remark" rows="2" placeholder="账单备注"></textarea>
                </div>
            </div>

            <div class="row mb-3 mt-4">
                <div class="col-7 offset-3 d-flex justify-content-between gap-2">
                    <button type="submit" class="btn btn-primary btn-sm">保存账单</button>
                    <a href="/list" class="btn btn-outline-secondary btn-sm">取消</a>
                </div>
            </div>
        </form>
    </div>
</div>

    <%- contentFor('pageJS') %>
        <!-- Core theme JS-->
        <script>
            document.getElementById('payType').addEventListener('input', function (e) {
                const options = document.getElementById('payTypeOptions').options;
                const inputValue = e.target.value.toLowerCase();

                Array.from(options).forEach(option => {
                    option.hidden = !option.value.toLowerCase().includes(inputValue);
                });
            });

            document.querySelector('form').addEventListener('submit', async function (e) {
                e.preventDefault();
                
                try {
                    const formData = {
                        type: document.querySelector('input[name="type"]:checked').value,
                        category: document.getElementById('category').value,
                        amount: document.getElementById('amount').value,
                        payType: document.getElementById('payType').value,
                        date: document.getElementById('date').value,
                        remark: document.getElementById('remark').value
                    };
    
                    const response = await fetch('/api/account', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(formData)
                    });
    
                    if (response.ok) {
                        window.location.href = '/list';
                    } else {
                        const errorData = await response.json();
                        alert(`提交失败: ${errorData.message || '未知错误'}`);
                    }
                } catch (error) {
                    console.error('Error:', error);
                    alert('网络请求失败，请检查连接');
                }
            })
        </script>